<script setup lang="ts">
import { ref } from 'vue'

interface OtherInfoTableProps {
  label: string
  prop: string
  type: 'input' | 'select' | 'radio' | 'text' | 'selection' | 'index'
}

const tableData = ref([{}])

const props = defineProps<{
  title: string
  disabled?: boolean
  otherInfoTableProps: OtherInfoTableProps[]
}>()

const getTableData = () => {
  return tableData.value
}

const setTableData = (data: any[]) => {
  if (!data) return
  tableData.value = data
}

const handleAddClick = () => {
  tableData.value.push({})
}

const handleRemoveClick = (index) => {
  tableData.value.splice(index, 1)
}

defineExpose({
  getTableData,
  setTableData,
})
</script>

<template>
  <div class="common-other-table">
    <div class="title">
      <i class="title-icon"></i>
      <span>{{ title }}</span>
    </div>
    <div class="add-icon">
      <el-button type="text" v-if="!props.disabled" @click="handleAddClick">
        <i class="el-icon-circle-plus-outline" style="font-size: 16px"></i>
      </el-button>
    </div>
    <el-table :data="tableData" border v-loading="false">
      <template v-for="item in otherInfoTableProps">
        <el-table-column
          v-if="item.type === 'input'"
          :label="item.label"
          :prop="item.prop"
          v-bind:key="item.prop"
        >
          <template v-slot="scope">
            <el-input
              v-model="scope.row[item.prop]"
              :disabled="props.disabled"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'select'"
          :label="item.label"
          :prop="item.prop"
          v-bind:key="item.prop"
        >
          <template v-slot="scope">
            <el-select
              v-model="scope.row[item.prop]"
              :disabled="props.disabled"
            ></el-select>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'radio'"
          :label="item.label"
          :prop="item.prop"
          v-bind:key="item.prop"
        >
          <template v-slot="scope">
            <el-radio-group v-model="scope.row[item.prop]">
              <el-radio
                v-for="option in item.options"
                :label="option.value"
                :key="option.value"
              >
                {{ option.label }}
              </el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'text'"
          :label="item.label"
          :prop="item.prop"
          v-bind:key="item.prop"
        >
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'selection'"
          :label="item.label"
          :prop="item.prop"
          type="selection"
          v-bind:key="item.prop"
        />
        <el-table-column
          v-else-if="item.type === 'index'"
          :label="item.label"
          type="index"
          width="50"
          v-bind:key="item.prop"
        />
      </template>
      <el-table-column label="操作" width="100" v-if="!props.disabled">
        <template v-slot="scope">
          <el-button type="text" @click="handleRemoveClick(scope.$index)">
            <i
              style="color: #f78989; font-size: 18px"
              class="el-icon-delete"
              :key="scope.$index"
            ></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped lang="scss">
.common-other-table {
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
  .title {
    margin: 10px 0;
    padding: 0px 0 2px 5px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #000000;
    display: flex;
    align-items: center;

    > span {
      margin-left: 5px;
    }

    .title-icon {
      width: 5px;
      height: 16px;
      background: #10a6dd;
      border-radius: 3px;
      margin-right: 4px;
    }
  }

  .add-icon {
    position: absolute;
    right: 18px;
    top: -5px;
  }
}
</style>
